<template>
  <div class="dashboard-container" v-if="roleName1 == '管理员'">
    <h1>住房管理</h1>
    <div>
      <el-select v-model="roleName2" placeholder="房间状态" style="width: 200px; margin-left: 500px">
        <el-option v-for="role in roleList" :label="role.name" :value="role.name" :key="role.id"></el-option>
      </el-select>
      <el-input v-model="phoneNumber2" placeholder="房间号" style="width: 200px; margin-left: 40px"></el-input>
      <el-button type="primary" @click="selectUser" :loading="selectButtonLoading" style="margin-left: 40px">查询
      </el-button>
      <el-button type="" @click="checkUser" style="margin-left: 40px">重置</el-button>
      <el-table :data="userList" height="650px" style="margin-top: 40px" border>
        <el-table-column align="center" fixed prop="" label="房间ID" sortable></el-table-column>
        <el-table-column align="center" fixed prop="" label="房间号" sortable></el-table-column>
        <el-table-column align="center" fixed prop="" label="房间状态" sortable></el-table-column>
        <el-table-column align="center" fixed prop="" label="房间备注" sortable></el-table-column>
        <el-table-column align="center" fixed prop="" label="房间类型" sortable></el-table-column>
        <el-table-column align="center" fixed prop="" label="房间价格" sortable></el-table-column>
        <el-table-column align="center" fixed prop="customerName" label="顾客名称" sortable></el-table-column>
        <el-table-column align="center" fixed prop="remark" label="身份证号" sortable></el-table-column>
        <el-table-column align="center" fixed label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="updateUserButton(scope.row)" size="small">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="修改" style="margin-top: 100px" :visible.sync="updateUserButtonController" width="50%"
        @close="closeDialog('ruleForm')">
        <div>
          <div style="margin: 10px">
            <el-form label-width="20%" :rules="userRoles" :model="updateUserDate" ref="ruleForm">
              <el-form-item label="顾客名称" prop="userName">
                <el-input v-model="updateUserDate.customerName" maxlength="20" show-word-limit style="width: 80%"
                  clearable placeholder="请输入顾客名称" />
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-radio-grout v-model="updateUserDate.sex" maxlength="1" show-word-limit style="width: 80%">
                  <el-radio v-model="updateUserDate.sex" label="男">男</el-radio>
                  <el-radio v-model="updateUserDate.sex" label="女">女</el-radio>
                </el-radio-grout>
              </el-form-item>
              <el-form-item label="电话号码" prop="phoneNumber">
                <el-input v-model="updateUserDate.phoneNumber" maxlength="11" show-word-limit style="width: 80%"
                  clearable placeholder="请输入电话号码" />
              </el-form-item>
              <el-form-item label="身份证号" prop="identificationCard">
                <el-input v-model="updateUserDate.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                  clearable placeholder="请输入身份证号" />
              </el-form-item>
              <el-form-item label="备注" prop="remark">
                <el-input v-model="updateUserDate.remark" maxlength="30" show-word-limit style="width: 80%" clearable
                  placeholder="请输入备注" />
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button>
            <el-button @click="closeDialog('ruleForm')">取消</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
  <!-- <div class="dashboard-container" v-else>
    <h1>无权访问</h1>
  </div> -->
</template>

<script>
// 引入mapGetters方法
import { selectStay, insertStay, cancelStay, abrogateStay, settlementLive } from "@/api/live";
import { mapGetters } from "vuex";

export default {
  name: "Users",
  // 使用mapGetters方法获取userId、userName、roleName
  computed: {
    ...mapGetters(["userId", "userName", "roleName"]),
  },
  data() {
    return {
      userId1: this.$store.state.user.userId,
      userName1: this.$store.state.user.userName,
      roleName1: this.$store.state.user.roleName,
      userId2: '',
      userName2: '',
      customerName2: '',
      phoneNumber2: '',
      identificationCard2: '',
      roleName2: '',
      roleList: [
        { id: 1, name: "已入住" },
        { id: 2, name: "未入住" },
      ],
      userList: [],
      selectButtonLoading: false,
      addUserButtonController: false,

      //弹窗打开事件
      addUserList: {
        liveTableId: '',
        customerId: '',
        customerName: '',
        roomId: '',
        roomTypeName: '',
        roomPrice: '',
        cancelTime: '',
        remark: '',
        room_number: ''
      },
      userRoles: {
        customerId: [{ required: true, trigger: 'blur', message: '顾客Id不能为空' },
        { min: 1, message: '请输入起码1一个字符', trigger: 'blur' }],
        customerName: [{ required: true, trigger: 'blur', message: '顾客名称不能为空' },
        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        sex: [{ required: true, trigger: 'blur', message: '性别不能为空' },
        { min: 1, max: 1, message: '性别只能是一位且必须是男或者女', trigger: 'blur' }],
        phoneNumber: [{ required: true, trigger: 'blur', message: '电话号码不能为空' },
        { min: 11, max: 11, message: '请输入合法的电话号码', trigger: 'blur' }],
        identificationCard: [{ required: true, trigger: 'blur', message: '身份证号不能为空' },
        { min: 18, max: 18, message: '请输入合法身份证号', trigger: 'blur' }]
      },
      updateUserButtonController: false,
      updateUserDate: {
        liveTableId: '',
        customerId: '',
        customerName: '',
        roomId: '',
        roomTypeName: '',
        roomPrice: '',
        cancelTime: '',
        remark: '',
        room_number: ''
      },
      deleteController: false,
      deleteUserId: ''
    };
  },
  //页面初始化方法
  mounted() {
    this.selectUser()
  },
  // 页面的事件，方法
  methods: {
    selectUser() {
      this.selectButtonLoading = true;
      selectStay({
        room_number: this.room_number,
        room_id: this.room_id,
        state: this.state

      }).then(
        response => {
          this.userList = response.data;
          console.log("查询结果");
          console.log(this.userList);
          this.selectButtonLoading = false;
        }
      )
    },
    checkUser() {
      this.customerName2 = ''
      this.phoneNumber2 = ''
      this.identificationCard2 = ''
      this.selectUser()
    },
    addUser(ruleNme) {
      this.$refs[ruleNme].validate((valid) => {
        if (valid) {
          console.log('插入:')
          console.log(this.addUserList)
          insert({
            customerId: this.addUserList.customerId,
            customerName: this.addUserList.customerName,
            sex: this.addUserList.sex,
            phoneNumber: this.addUserList.phoneNumber,
            identificationCard: this.addUserList.identificationCard,
            remark: this.addUserList.remark
          }).then(response => {
            this.addUserButtonController = false
            this.selectUser()
          })
        } else {
          return false
        }
      })
    },
    closeDialog(ruleForm) {
      this.$refs[ruleForm].resetFields()
      this.addUserButtonController = false;
      this.updateUserButtonController = false;
    },
    addUserButton() {
      this.addUserList = {
        customerId: '',
        customerName: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      }
      this.addUserButtonController = true
    },
    updateUserButton(row) {
      this.updateUserDate = {
        customerTableId: row.customerTableId,
        customerId: row.customerId,
        customerName: row.customerName,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
      this.updateUserButtonController = true
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('修改：')
          console.log(this.updateUserDate)
          update({
            customerTableId: this.updateUserDate.customerTableId,
            customerId: this.updateUserDate.customerId,
            customerName: this.updateUserDate.customerName,
            sex: this.updateUserDate.sex,
            phoneNumber: this.updateUserDate.phoneNumber,
            identificationCard: this.updateUserDate.identificationCard,
            remark: this.updateUserDate.remark,
          }).then(response => {
            this.updateUserButtonController = false
            this.selectUser()
          })
        } else {
          return false
        }
      })
    },
    deleteButton(row) {
      this.deleteUserId = row.userId
      this.deleteController = true
    },
    deleteUser() {
      deleteUser({ userId: this.deleteUserId }).then(
        response => {
          this.deleteController = false
          this.selectUser()
        }
      )
    }
  }
};
</script>

<style lang="scss" scoped>
// 定义dashboard类
.dashboard {

  // 定义dashboard-container类
  &-container {
    // 设置外边距
    margin: 30px;
  }

  // 定义dashboard-text类
  &-text {
    // 设置字体大小
    font-size: 30px;
    // 设置行高
    line-height: 46px;
  }
}
</style>
